<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var menu_data = [];
            var array = [];
            $.getJSON('http://localhost:8080/loadMenuVos.htm', function (data) {
                for (var i = 0; i < data.length; i++) {
                    getArray(data[i]);
                }
//                console.log(array);

                var objs = getChildren(0);
//                console.log(objs);
                for (var i = 0; i < objs.length; i++) {
                    var obj = objs[i];
                    var parent = {
                        "text": obj.designation,
                        "state": "closed",
                        "attributes": {
                            "id": obj.id,
                            "parentId": obj.parentId,
                            "grade": obj.grade,
                            "designation": obj.designation,
                            "url": obj.url,
                            "level": 0
                        },
                        "children": []
                    };
                    getTree(parent);
                    menu_data.push(parent);
                }
                console.log(menu_data);
                $("#tt").tree({
                    data: menu_data,
                    onClick: function (node) {
                        if (node.attributes.url && node.attributes.url != '') {
                            alert(node.attributes.url);
                            var centerPanel = $('#cc').layout('panel', 'center');
                            var panelOpts = centerPanel.panel("options");
                            panelOpts["title"] = node.text + "管理";
                            centerPanel.panel(panelOpts);
                            centerPanel.panel('refresh', node.attributes.url);
                        }
                    }
                });
            });

            function getTree(parent) {
                var childrenArray = getChildren(parent.attributes.id);
                if (childrenArray) {
                    var level = parent.attributes.level + 1;
                    if (level > 2) {
                        delete parent.children;
                        delete parent.state;
                        return;
                    }
                    $.each(childrenArray, function (i, n) {
                        n['level'] = level;
                    });
                    for (var i = 0; i < childrenArray.length; i++) {
                        var obj = childrenArray[i];
                        var cc = {
                            "text": obj.designation,
                            "state": "closed",
                            "attributes": {
                                "id": obj.id,
                                "parentId": obj.parentId,
                                "grade": obj.grade,
                                "designation": obj.designation,
                                "url": obj.url,
                                "level": obj.level
                            },
                            "children": []
                        }
                        parent.children.push(cc);
                        getTree(cc);
                    }
                } else {
                    delete parent.children;
                    delete parent.state;
                }
            }

            function getArray(menu) {
                array.push({
                    "id": menu.id,
                    "parentId": menu.parentId,
                    "grade": menu.grade,
                    "designation": menu.designation,
                    "url": menu.url,
                    "type": menu.type
                });
                if (menu.menuVos) {
                    for (var i = 0; i < menu.menuVos.length; i++) {
                        getArray(menu.menuVos[i]);
                    }
                }
            }

            function getChildren(pId) {
                var list = new Array;
                for (var i = 0; i < array.length; i++) {
                    var obj = array[i];
                    if (pId == obj.parentId) {
                        list.push(obj);
                    }
                }
                return list;
            }
        });
    </script>
</head>
<body>
<div class="easyui-layout" id="cc" data-options="fit:true">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'west',split:true" title="菜单" style="width:250px;">
        <ul id="tt"></ul>
    </div>
    <div data-options="region:'center',title:'xxx管理',iconCls:'icon-ok'">

    </div>
</div>
</body>
</html>